import React, { useEffect, useState } from "react";
import './login.css';
import '../Loan/Apply/apply.css'
import NavigateBar from "@/components/NavigateBar";
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import icon_app_logo from "@/assets/icon_app_logo.png"
import icon_back_black from "@/assets/icon_back_black.png"
import icon_add_favorite_white from "@/assets/icon_add_favorite_white.png"
import "../../App.css";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import { checkOSType } from "@/utils/utils";
import { LangVnd } from '@/utils/langVnd';

/**
 * 安装页
 */
export default function InstallApp() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    // 文案翻译
    const [curLang, setCurLang] = useState(LangVnd);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //打点
        doHitEvent("LOGIN_START")

        //获取时区
        let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        console.log("timeZone:" + timeZone);

        return () => {
            //打点
            doHitEvent("LOGIN_END")
        }
    }, [])


    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //点击登录
    const onLoginSubmit = async () => {
        try {
            //打点
            doHitEvent("LOGIN_COMMIT_CLICK")

            //判断是ios或android
            if (checkOSType() === "IOS") {
                //打开新窗口
                window.open("https://gogo.dzptelaf.com/yx5s0o", "_blank")
            } else {
                //打开新窗口
                window.open("https://www.cmcwallet.net/apk/vicmc_r45.apk", "_blank")
            }

        } catch (e) {
            console.log(e)
        }
    }


    //点击返回
    const onHandleGoBack = async () => {
        try {
            //打点
            doHitEvent("LOGIN_BACK_CLICK")

            //跳转登录页
            history.replace('/register')

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className="login">
            <NavigateBar theme="white" backIcon={icon_back_black} rightIcon={icon_add_favorite_white} showLogout={false} onAddFavorite={() => { }} onAddHome={() => { }} onGoBack={onHandleGoBack}>{curLang.appInstallApp}</NavigateBar>

            <div className="pageContentColumn contentHorizontalPadding loginTopEdge20Px">
                {/* logo与名称 */}
                <div className='loginApp'>
                    <div className='loginAppLogoContent'>
                        <img className="loginAppLogo" src={icon_app_logo} alt='' />
                        <span className='loginAppName'>{curLang.appName}</span>
                    </div>
                    <span className='loginAppUser loginTopEdge20Px'>{curLang.appInstallAppTips}</span>
                </div>

                {/* 登录提交 */}
                <div className="loginSubmit loginTopEdge80Px" onClick={onLoginSubmit}>{curLang.appInstallApp}</div>

                {/* load mask */}
                <Mask visible={maskVisible} opacity={0.1}
                    onMaskClick={() => { }}>
                    <div className="overlayContent">
                        <span style={{ fontSize: 24, color: '#ff3141' }} >
                            <DotLoading color="currentColor" />
                        </span>
                    </div>
                </Mask>
            </div>
        </div >
    )
}